<template>
    <div class="user">
        <header-nav></header-nav>
        <div class="container">
            <el-row class="demo-autocomplete" style="margin-bottom: 10px;">
                <el-col :span="4">
                    <el-select v-model="topic.tab" placeholder="请选择板块">
                        <el-option
                            v-for="item in options"
                            :key="item.key"
                            :value="item.key"
                            :label="item.value"
                            >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="20">
                    <el-input
                        placeholder="请输入标题"
                        v-model="topic.title"
                        clearable>
                    </el-input>
                </el-col>
            </el-row>

            <mavon-editor class="editor" v-model="topic.t_content" ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" />
        </div>
        <div class="fixedBottom">
            <div class="container">
                <el-button @click="submit()" class="right el-button--success">发布</el-button>
            </div>
        </div>
    </div>

</template>
<script>
    import HeaderNav from "@/components/header/header"
    import SideBar from "@/components/sidebar/sidebar"
    import {mapState, mapActions} from 'vuex'
    import { topicType, getTopicDetail, createTopic } from "@/service/api"
    import axios from 'axios'

    export default {
        data() {
            return {
                topic: {
                    title: '',
                    tab: '',
                    t_content: '',
                    topic_id: '',
                },
                options: []
            }
        },
        mounted(){
            this.topic.topic_id = this.$route.params.tid
            // console.log(this.$route.params.tid)
            this.getType()
            this.topicDetail()
        },
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapActions(['getUserInfo']),
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('image', $file);
                axios({
                    url: '/upload',
                    method: 'POST',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    // console.log(url.data.data.url)
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    // $vm.$img2Url 详情见本页末尾
                    this.$refs.md.$img2Url(pos, url.data.data.url);
                })
            },
            $imgDel(url) {

            },
            async submit() {
                let param = this.topic

                let res = await createTopic(param)
                if(res.code) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    this.$router.push('/user/' + this.userInfo.name)
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            },
            async getType() {
                let param = ''
                let res = await topicType(param)
                if(res.code) {
                    this.options = res.result
                    // console.log(this.select)
                }
            },
            async topicDetail() {
                let param = {
                    topic_id: this.topic.topic_id
                }
                let res = await getTopicDetail(param)
                if(res.code) {
                    let _topic = res.result.topic
                    this.topic.tab = _topic.tab_key
                    this.topic.t_content = _topic.content
                    this.topic.title = _topic.title
                    // console.log(res.result)
                }
            }
        },
        components: {
            HeaderNav,
            SideBar
        }
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';

    .user {
        .container {
            margin-top: 10px;
            .editor {
                z-index: 100;
                min-height: 500px;
                margin-bottom: 100px;
                border-radius: 5px;
                overflow: hidden;
            }
        }
        .fixedBottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 300;
            background-color: $title-bg;
            box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.24);
            padding: 10px 0;
        }
    }
    
</style>

